<script>
	// import debounce from '../utils/debounce'
	// let apiUrl = 'https://bookmarks-7g3arqt4ba9e353f-1259294812.ap-shanghai.app.tcloudbase.com/getRandomName';
	let baseUrl = 'http://1.15.38.63:7072';
	let apiUrl = `${baseUrl}/getRandomName`;
	export let name = '无名氏';
	let xing = '';
	let sexs = [
		{ id: 1, text: `性别`,value:'' },
		{ id: 2, text: `男`,value:'nan' },
		{ id: 3, text: `女`,value:'nv' }
	];
	let sex = '';
	let nameStyles= [{id:1,text:'正常'},{id:2,text:'二次元'}];
	let nameStyle = '';
	let menuTxt = "请大师赐名";
	let promise = getRandomName();
	async function getRandomName() {
		const res = await fetch(
			`${apiUrl}?xing=${xing}&sex=${sex}&style=''`
		);
		const text = await res.text();
		menuTxt = "请大师赐名";
		if (res.ok) {
			// console.log(JSON.parse(text));			
			name = JSON.parse(text).data;
			return JSON.parse(text);
		} else {
			throw new Error(text);
		}
	}
	function handleClick() {
		menuTxt = "思考中...";
		promise = getRandomName();
	}
	function nameStyleChange(){
		if(nameStyle=='正常'){
			apiUrl = `${baseUrl}/getRandomName`;
		}else if(nameStyle=='二次元'){
			// apiUrl = `${baseUrl}/getErciyuanName`;
			apiUrl = `${baseUrl}/getRandomName/erciyuan`;
		}

	}
</script>

<main>
	<h1>Hello</h1>
	<div class="name">{name}</div>
	{#if name}
	<div class="get-new" on:click={handleClick}>{menuTxt}</div>
	{/if}
	<div class="form-data">
		<span class="input input--hoshi">
			<input class="input__field input__field--hoshi" type="text" maxlength="2" bind:value={xing} placeholder="" id="input-1">
			<label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-1">
				<span class="input__label-content input__label-content--hoshi">姓</span>
			</label>
		</span>
		<select class="select" bind:value={sex} >
			{#each sexs as sexed}
				<option value={sexed.value}>
					{sexed.text}
				</option>
			{/each}
		</select>
		<select class="select" bind:value={nameStyle} on:change={nameStyleChange}>
			{#each nameStyles as nameStyled}
				<option value={nameStyled.text}>
					{nameStyled.text}
				</option>
			{/each}
		</select>
	</div>
	<div class="section-wrap">
	<section class="status">
		{#await promise}
		  <p>大师正在思考中...</p>
		{:then value}
		  <p>帮你想到： {value.data}</p>
		{:catch error}
			<div class="error">
				<p>大师疯了: {error.message}</p>
		  		<p>请刷新页面重试！</p>
			</div>		  
		{/await}
		<!-- <div class="links" style="margin-top: 24px;">
			<a href="https://webify.cloudbase.net/" target="_blank">CloudBase Webify </a>提供网站托管服务
		</div> -->
	  </section>
	</div>
	<footer style="position: fixed;left: 24px;right: 24px;bottom: 24px;;">
		<a href="/ancient.html" style="color: #ddd;">古代人名生成器</a>
	</footer>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		/* max-width: 240px; */
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}
	.name{
		margin-top: 20vh;
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}
	.get-new{
		margin-top: 24px;
		display: inline-block;
		padding: 8px 30px;
		border-radius: 5px;
		border: 1px solid #ff3e00;
		cursor: pointer;
	}

	.error{color: #333;}

	.section-wrap{
		height: 150px;
	}
	.status{position: fixed;left: 1em;right: 1em;bottom: 80px;color: #0050a0;background: #fff;z-index: 99;}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
	@media (max-width: 640px) {
		.name{margin-top: 10vh;font-size: 2.5em;}
	}
</style>
